<script setup lang="ts" name="MapFilter">
withDefaults(
	defineProps<{
		lengeds: Array<{
			name: string;
			selected: boolean;
			icon: string;
			disabled: boolean;
		}>;
	}>(),
	{},
);

const emits = defineEmits(['lengedChange', 'dateChange']);

function lengedChange(e: any, index: number) {
	emits('lengedChange', {
		index,
		selected: e,
	});
}
</script>

<template>
	<div
		class="lenged-container bg-white border border-[#ddd] w-[121px] rounded px-2 py-3"
	>
		<div
			v-for="(item, index) in lengeds"
			:key="item.name"
			class="lenged-item flex flex-col mb-4"
		>
			<el-checkbox
				class="flex-1"
				:model-value="item.selected"
				@change="lengedChange($event, index)"
				:disabled="item.disabled || false"
			>
				<div class="flex items-center justify-between">
					<span>{{ item.name }}</span>
					<img :src="item.icon" class="w-5 h-5" alt="" />
				</div>
			</el-checkbox>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.lenged-container {
	position: absolute;
	left: 16px;
	top: 60px;
	.lenged-item {
		&:last-of-type {
			margin-bottom: 0;
		}
		:deep(.el-checkbox) {
			height: 21px;

			.el-checkbox__label {
				flex: 1;
			}
		}
	}
}
</style>
